<template>
	<view class="general-wrap">
		<!-- 头部header -->
		<view class="header">
			<uni-nav-bar :statusBar="true" leftIcon="arrowleft" fixed="true" title="通用" @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<!-- 内容 -->
		<view class="general-content">
			<view class="uni-panel" v-for="(item, index) in lists" :key="index">
				<view class="uni-panel-h" @click="goDetailPage(item.url)">
					<text class="uni-panel-text">{{item.name}}</text>
					<text class="uni-panel-icon uni-icon">&#xe470;</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				lists: [
					{name: '账号安全', url: ''},
					{name: '网络设置', url: ''},
					{name: '流量统计', url: ''},
					{name: '功能管理', url: ''},
					{name: '隐私设置', url: ''},
					{name: '辅助功能', url: ''},
					{name: '修改密码', url: ''},
					{name: '退出', url: '../login/login'}
				]
			}
		},
		methods: {
			...mapActions(['logout']),
			clickLeft() {
				uni.navigateBack()
			},
			goDetailPage(url) {
				if (!url) {
					uni.showToast({
						icon: 'none',
						title: '功能开发中...',
					})
					return
				}
				if (url.includes('login')) {
					this.logout()
				}
				setTimeout(() => {
					uni.navigateTo({
						url
					})
				}, 600)
			}
		}
	}
</script>

<style scoped lang="scss">
	.general-wrap {
		.general-content {
			box-sizing: border-box;
			margin-top: 20rpx;
			padding: 10rpx 36rpx;
			.uni-panel {
				box-shadow: 0px 0px 0px 2rpx #F8F8F8;
			    margin-bottom: 12px;
			}
			
			.uni-panel-h {
			    display: flex;
			    flex-direction: row;
			    align-items: center;
			    padding: 12px;
			}
			/*
			.uni-panel-h:active {
			    background-color: #f8f8f8;
			}
			 */
			.uni-panel-h-on {
			    background-color: #f0f0f0;
			}
			
			.uni-panel-text {
			    flex: 1;
			    color: #000000;
			    font-size: 14px;
			    font-weight: normal;
			}
			
			.uni-panel-icon {
			    margin-left: 15px;
			    color: #999999;
			    font-size: 14px;
			    font-weight: normal;
			    transform: rotate(0deg);
			    transition-duration: 0s;
			    transition-property: transform;
			}
			
			.uni-panel-icon-on {
			    transform: rotate(180deg);
			}
		}
	}

</style>
